<template>
  <div class="step-box">
    <div class="agreement-box">
      <div class="step-detail">
        <el-steps direction="vertical" :space="100" :active="index">
          <el-step v-for="item in agreementList" :key="item.id" :title="item.agreementName" />
        </el-steps>
      </div>
      <div class="agreement-detail">
        <template v-if="currentAgreement.agreementUrl">
          <p class="agreement-title">{{ currentAgreement.agreementTypeStr }}</p>
          <iframe class="iframe-box" :src="currentAgreement.agreementUrl" />
        </template>
        <p class="handle-box">
          <el-button v-if="index< agreementList.length" key="sign" type="primary" :disabled="timeCount>0" @click="signHandle">我已阅读并同意<span v-if="timeCount>0">({{ timeCount }})</span></el-button>
          <el-button v-else key="next" type="primary" @click="nextHandle">下一步</el-button>
        </p>
      </div>
    </div>
  </div>

</template>

<script>
import { getAgreementByCondition } from '@/api/common'
import { signAgreement } from '@/api/enter'
export default {
  name: 'Step1',
  props: {
    id: {
      type: [Number, String],
      default: ''
    },
    industryCode: {
      type: [Number, String],
      default: ''
    },
    siteIds: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentAgreement: '',
      agreementList: [],
      index: 0, // 当前协议索引
      timeCount: 5,
      timer: ''
    }
  },

  created() {
    this.getAgreement()
  },

  methods: {

    // 获取入驻协议列表
    getAgreement() {
      const data = {
        agreementType: 0,
        industryCode: this.industryCode,
        common: true,
        pageSize: 100,
        pageNo: 1
      }
      getAgreementByCondition(data).then(res => {
        this.agreementList = res || []
        this.currentAgreement = this.agreementList[0]
        this.timeStart()
      }).catch(() => {})
    },

    timeStart() {
      this.timer = setInterval(() => {
        this.timeCount--
        console.log(this.timeCount)
        if (this.timeCount === 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },

    // 签署协议
    signHandle() {
      const data = {
        agreementIds: this.currentAgreement.id,
        siteIds: this.siteIds?.split(',')
      }
      signAgreement(data).then(() => {
        this.index++
        if (this.index < this.agreementList.length) {
          this.currentAgreement = this.agreementList[this.index]
          this.timeCount = 5
          this.timeStart()
        }
      }).catch(() => {})
    },

    // 下一步
    nextHandle() {
      this.$emit('next')
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'step';
.agreement-box{
  display: flex;
  .step-detail{
    width: 30%;
  }
  .agreement-detail{
    width: 70%;
    min-height: 700px;
    background: rgba(72, 213, 85, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .agreement-title{
    height: 25px;
    font-size: 18px;
    font-weight: 500;
    color: $primary;
    line-height: 25px;
  }

  .iframe-box{
    width: 100%;
    height: 100%;
    margin: 20px 0;

  }
  .handle-box{
    text-align: center;
  }
}

</style>
